<template>
	<a-modal
		:open="open"
		@update:open="$emit('update:open', $event)"
		title="应用详情"
		:footer="null"
		width="500px"
		class="app-detail-modal"
	>
		<div class="app-detail-content" v-if="app">
			<!-- 应用基础信息 -->
			<div class="app-basic-info">
				<a-row :gutter="[16, 16]">
					<a-col :span="24">
						<a-row align="middle">
							<a-col :span="6">
								<label class="info-label">创建者：</label>
							</a-col>
							<a-col :span="18">
								<UserAvatar :user="app.user" :show-name="true" />
							</a-col>
						</a-row>
					</a-col>
					<a-col :span="24">
						<a-row align="middle">
							<a-col :span="6">
								<label class="info-label">创建时间：</label>
							</a-col>
							<a-col :span="18">
								<span class="time-value">{{ formatDateTime(app.createTime) }}</span>
							</a-col>
						</a-row>
					</a-col>
					<a-col :span="24">
						<a-row align="middle">
							<a-col :span="6">
								<label class="info-label">部署状态：</label>
							</a-col>
							<a-col :span="18">
								<div class="deploy-status-info">
									<a-tag v-if="app.deployedTime" color="green">已部署</a-tag>
									<a-tag v-else color="default">未部署</a-tag>
									<span v-if="app.updateTime" class="update-time">
										{{ formatDateTime(app.updateTime) }}
									</span>
								</div>
							</a-col>
						</a-row>
					</a-col>
					<a-col :span="24">
						<a-row align="middle">
							<a-col :span="6">
								<label class="info-label">生成类型：</label>
							</a-col>
							<a-col :span="18">
								<a-tag v-if="app.codeGenType" :color="getCodeGenTypeColor(app.codeGenType)">
									{{ getCodeGenTypeText(app.codeGenType) }}
								</a-tag>
								<span v-else class="no-data">未设置</span>
							</a-col>
						</a-row>
					</a-col>
				</a-row>
			</div>

			<!-- 操作栏（仅本人或管理员可见） -->
			<div v-if="showActions" class="app-actions-section">
				<a-row :gutter="[16, 0]" justify="start">
					<a-col>
						<a-button @click="handleEdit" type="primary" :disabled="generating">
							<template #icon>
								<EditOutlined />
							</template>
							修改
						</a-button>
					</a-col>
					<a-col>
						<a-button @click="handleDelete" danger>
							<template #icon>
								<DeleteOutlined />
							</template>
							删除
						</a-button>
					</a-col>
				</a-row>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts">
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { computed } from 'vue'
import dayjs from 'dayjs'
import UserAvatar from '@/components/common/UserAvatar.vue'
import { useGenerationStore } from '@/stores/useGenerationStore'
import { getCodeGenTypeText, getCodeGenTypeColor } from '@/constants/codeGenType'

const generationStore = useGenerationStore()
const generating = computed(() => generationStore.hasActiveGeneration())

interface Props {
	open: boolean
	app?: API.AppVO | null
	showActions?: boolean
}

const props = withDefaults(defineProps<Props>(), {
	showActions: false,
})

const emit = defineEmits<{
	'update:open': [value: boolean]
	edit: [id: string | number]
	delete: [id: string | number]
}>()

// 格式化日期时间
const formatDateTime = (time: string | undefined) => {
	if (!time) return '未知'
	return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 处理编辑
const handleEdit = () => {
	if (generating.value) {
		message.warning('AI 正在生成中，请等待完成后再进行修改操作')
		return
	}
	if (props.app?.id) {
		emit('edit', props.app.id)
	}
}

// 处理删除
const handleDelete = async () => {
	// 如果正在生成，先中断SSE流式传输
	if (generating.value && props.app?.id) {
		try {
			// 导入中断生成任务的API
			const { interruptGenerationTask } = await import('@/services/appExperienceService')
			await interruptGenerationTask(props.app.id)
			message.info('已中断当前生成任务')
		} catch (error) {
			console.warn('中断生成任务失败:', error)
			// 即使中断失败也继续删除流程
		}
	}
	if (props.app?.id) {
		emit('delete', props.app.id)
	}
}
</script>

<style scoped lang="scss">
.app-detail-modal {
	:deep(.ant-modal-content) {
		border-radius: 12px;
	}

	.app-detail-content {
		.app-basic-info {
			padding-bottom: 16px;

			.info-label {
				color: #666;
				font-weight: 500;
				text-align: left;
			}

			.time-value {
				color: #2d3748;
			}

			.deploy-status-info {
				display: flex;
				align-items: center;
				gap: 12px;

				.update-time {
					color: #666;
					font-size: 13px;
				}
			}

			.no-data {
				color: #999;
				font-style: italic;
			}
		}

		.app-actions-section {
			padding-top: 16px !important;
			border-top: 1px solid #f0f0f0;
		}
	}
}
</style>
